<template>
    <div>
        <ListDetailsHandle>
            <div slot="topNav-content">
                <div class="paging-component">
                    <router-link 
                        v-for="(item,index) in routerArr"
                        :key='index'
                        :to='item.path' 
                        tag='div' 
                        class="page-content" 
                        :class="{active : currentIndex == index}"  
                        @click.native='changestyle(index)'
                        
                    >
                    <p>{{item.name}}</p>
                    
                    </router-link>
                   
                </div>
            </div>
        </ListDetailsHandle>
        <router-view></router-view>
    </div>
</template>

<script>
import ListDetailsHandle from './detailsComponents/ListDetailsHandle.vue' 

export default {
    name:'ListGoodsDetails',
    data(){
        return{
            currentIndex:0,
            routerArr:[{
                path:'/listGoodsDetails/goods/2',
                name:'商品'
            },{
                path:'/listGoodsDetails/goodsDetails',
                name:'详情'
            }]
        }
    },
    components:{
        ListDetailsHandle
    },
    methods:{
        changestyle(index){
            this.currentIndex=index;
        }
    }
}
</script>

<style lang='less' scoped>
.paging-component{
    width: 155px;
    height: 32px;
    display: flex;
    .page-content{
        flex: 1;
        border: 1px solid #E5E5E5;
        p{
            font-size: 16px;
            color: rgba(16, 16, 16, 1);
        }
    }
}


.active{
    background-color: #EDEDED;
}
.router-link-active{
    background-color: #EDEDED;
}
</style>
